<template>
  <div class="card-out-container">
    <a-form layout="inline" v-if="showMore" class="multi-line-search-form">
      <a-form-item :label="$t('deviceManage.clientName')">
        <a-input v-model:value.trim="queryParam.name" :placeholder="$t('deviceManage.pleaseInputClientName')" @keyup.enter="loadData" allowClear />
      </a-form-item>
      <a-form-item :label="$t('deviceManage.waterLineNo')">
        <a-input v-model:value.trim="queryParam.hangerLine" :placeholder="$t('other.pleaseInputWaterLineNo')" @keyup.enter="loadData" allowClear />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
          <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <CustomTable :operateMargin="true" storeTableName="clientTable" rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :rowSelection="isEnvLocal ?null:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,getCheckboxProps: checkboxProps, fixed: 'left'}" :pagination="null" :scroll="{y: 'calc(100vh - 390px)'}" :showMore="showMore">
      <template #operateLeft>
        <div class="operate-left">
          <a-button v-if="isEnvLocal" type="primary" @click="syncData(syncDataAry)">{{ $t('common.sync') }}</a-button>
          <span v-else>
            <a-button type="primary" @click="modalDo({},'addForm',false)">{{ $t('common.add') }}</a-button>
            <a-button type="warning" ghost :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{ $t('common.delMore') }}</a-button>
          </span>
        </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search v-model:value.trim="fuzzySearch" enter-button :placeholder="$t('deviceManage.clientName')" v-if="!showMore" @search="loadData" />
          <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{ $t('common.highFilter') }}</a-button>
        </div>
      </template>
      <template #bodyCell="{ scope }">

        <template v-if="scope.column.key === 'status'">
          <a-switch :checked="!Boolean(scope.record.status)" :disabled="isEnvLocal" @change="(value) => changeStatus(value,  scope.record)" />
        </template>
        <template v-if="scope.column.key === 'type'">
          {{ scope.record.type ==0? $t('other.pleaseInputWaterLineNo') : $t('other.businessManage') }}
        </template>
        <template v-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button type="link" class="primary-link" @click="handleEdit(scope.record)">{{ $t('common.editor') }}</a-button>
            <a-divider type="vertical" />
            <a-button type="link" class="warning-link" :disabled="!Boolean(scope.record.status)" @click="handleDelete(scope.record.id)">{{ $t('common.del') }}</a-button>
          </span>
        </template>
      </template>
    </CustomTable>

    <add-dialog ref="addForm" @ok="modalFormOk"></add-dialog>
    <edit-dialog ref="modalForm" @ok="modalFormOk"></edit-dialog>
    <SyncDataModal ref="syncDataModalRef" />
  </div>
</template>
<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import AddDialog from './modules/addDialog.vue'
import EditDialog from './modules/editDialog.vue'
import { store } from "@/store";
import { mapState } from "vuex";
import { normalColumns, localColumns } from "./modules/makeConfig.js";
import CustomTable from '@/components/commonTable/customTable.vue'
import SyncDataModal from '@/components/syncModal/syncDataModal.vue'
export default {
  name: 'deviceManageClient',
  mixins: [ListMixinPm],
  components: { AddDialog, EditDialog, CustomTable, SyncDataModal },
  data () {
    return {
      storeName: 'getClient',
      url: {
        list: '/api/device/client/list',
        delete: '/api/device/client/delete',
        save: '/api/device/client/update-status',
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: [],
      clientTypeArray: [{ "label": this.$t('other.waterLineControl'), "value": 0 }, { "label": this.$t('other.businessManage'), "value": 1 }],
      test: [],
      fuzzySearchName: 'name',
      syncDataAry: [
        { syncIotCloudDataType: 'ihs:device:client' },
        { syncIotCloudDataType: 'ihs:device:hangerLine' },
        { syncIotCloudDataType: 'ihs:device:hangerLinePushRod' },
        { syncIotCloudDataType: 'ihs:device:hangerLineGroup' }
      ]
    }
  },
  computed: {
    ...mapState({
      waterList: state => state.normalData.waterList,
    })
  },
  created () {
    this.columns = this.isEnvLocal ? localColumns : normalColumns
    store.dispatch("getWater");
  },
  methods: {
    initModalSelectOptions () {
      return {
        clientTypeArray: this.clientTypeArray,
        waterList: this.waterList,
        status: [
          { value: 0, label: this.$t('common.start') },
          { value: 1, label: this.$t('common.stop') }
        ]
      }
    }

  },
}
</script>